.toc {
    margin: 0 2px 40px 2px;
    border: 1.2px solid var(--border);
    background: var(--entry);
    border-radius: var(--radius);
    padding: 0.4em;
}

.toc-container {
    margin: 10px 0 0 0;
}

.toc-container.wide {
    position: absolute;
    height: 100%;
    /* border-right: 1px solid var(--border); */
    left: calc((var(--toc-width) + var(--gap)) * -0.85);
    top: calc(var(--gap) * 1);
    width: var(--toc-width);
}

.wide .toc {
    position: sticky;
    top: var(--gap);
    /*top: 0;*/
    /*top: 15px;*/
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
}

.toc details summary {
    margin-inline-start: 0;
    padding: 0;
    width: 110px;
    cursor: pointer;
}

.toc details[open] summary {
    font-weight: 500;
    width: 110px;
    cursor: pointer;
}

.toc-container.wide .toc .inner {
    margin: 0;
}

.active {
    color: #42b983;
    font-size: 100%;
    /* font-weight: 600; */
    border-bottom: 1px solid transparent;
    padding-bottom: 0.1rem;
    border-bottom-color: #42b983;
    font-weight: 600;
}

.dark .active {
    color: var(--content);
    font-weight: 600;
}

.toc ul {
    list-style-type: circle;
}

.toc .inner {
    margin: 0 0 0 20px;
    padding: 0;
    font-size: 16px;

    max-height: 83vh;
    overflow-y: auto;
}

.toc .inner::-webkit-scrollbar-thumb {
    background: var(--border);
    border: 8px solid var(--theme);
    border-radius: var(--radius);
}

.toc li ul {
    margin-inline-start: calc(var(--gap) * 0.5);
    list-style-type: none;
}

.toc li {
    list-style: none;
    font-size: 0.90rem;
    /*padding-bottom: 5px;*/
    padding: 5px 0 0 0;
}

.toc li a:hover {
    font-weight: 600;
}

.dark .toc li a:hover {
    font-weight: 600;
    color: var(--content);
}
